<template>
	<view class="">
		<!-- 各组件页面 -->
		<view class="module">
			<view :style="{ display: current == 0 ? 'block' : 'none' }">
				<at-page1 ref="page1"></at-page1>
			</view>
			<view :style="{ display: current == 1 ? 'block' : 'none' }">
				<at-page2 ref="page2"></at-page2>
			</view>
			<view :style="{ display: current == 2 ? 'block' : 'none' }">
				<at-page3 ref="page3"></at-page3>
			</view>
			<view :style="{ display: current == 3 ? 'flex' : 'none' }">
				<at-page4 ref="page4"></at-page4>
			</view>
			<view :style="{ display: current == 4 ? 'flex' : 'none' }">
				<at-page5 ref="page5"></at-page5>
			</view>
		</view>
		
		<!-- tabbar -->
		<view class="at-tab-bar">
			<view class="placeholder" v-if="fixedBottom"></view>
			<view class="bar" :class="{'fixed':fixedBottom}">
				<view class="h-flex-x h-flex-5">
					<view class="item h-flex-x h-flex-center" :class="{
							'active':current == index
						}" v-for="(item,index) in  tabList" :key="index" @tap="change(index)">
		
						<view>
							<view class="h-flex-x h-flex-center">
								<view class="icon">
									<view>
										<view class="icon-default h-flex-x h-flex-center" v-if="index != current">
											<image style="width: 48rpx;height: 48rpx;" :src="item.icon" mode=""></image>
										</view>
										<view class="icon-selected h-flex-x h-flex-center" v-else>
											<image style="width: 48rpx;height: 48rpx;" :src="item.iconSelected" mode="">
											</image>
										</view>
									</view>
								</view>
							</view>
							<view class="h-flex-x h-flex-center">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import atPage1 from '@/components/at-page/at-page1.vue';
	import atPage2 from '@/components/at-page/at-page2.vue';
	import atPage3 from '@/components/at-page/at-page3.vue';
	import atPage4 from '@/components/at-page/at-page4.vue';
	import atPage5 from '@/components/at-page/at-page5.vue';
	export default {
		// 窗帘切换方式
		name: "atTabBarOverturn",
		props: {
			// 固定底部
			fixedBottom: {
				type: Boolean,
				default: true
			}
		},
		components: {
			"at-page1":atPage1,
			"at-page2":atPage2, 
			"at-page3":atPage3, 
			'at-page4':atPage4, 
			"at-page5":atPage5, 
		},
		data() {
			return {
				prevIndex: -1,
				current: 4,
				tabList: [{
						"icon": "../../static/tabbar/home_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "首页"
					},
					{
						"icon": "../../static/tabbar/order_no.png",
						"iconSelected": "../../static/tabbar/order.png",
						"text": "窗帘1"
					},
					{
						"icon": "../../static/tabbar/order_no.png",
						"iconSelected": "../../static/tabbar/order.png",
						"text": "窗帘2"
					},
					{
						"icon": "../../static/tabbar/store_no.png",
						"iconSelected": "../../static/tabbar/store.png",
						"text": "窗帘3"
					},
					{
						"icon": "../../static/tabbar/my_no.png",
						"iconSelected": "../../static/tabbar/my.png",
						"text": "窗帘4"
					},
				],
				openBulge: false
			};
		},
		methods: {
			change(index) {
				console.log(index);
				let that = this;
				if (this.tabList[index].bulge) {
					return;
				}
				if (this.current == index) {
					return;
				};

				this.prevIndex = this.current;
				this.current = index;
				
				if (that.current == 0) {
					that.$refs.page1.ontrueGetList();
				} else if (that.current == 1) {
					that.$refs.page2.ontrueGetList();
				} else if (that.current == 2) {
					that.$refs.page3.ontrueGetList();
				} else if (that.current == 3) {
					that.$refs.page4.ontrueGetList();
				} else if (that.current == 4) {
					that.$refs.page5.ontrueGetList();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./at-flex.scss";
	@import "./tab-bar.scss";

	.at-tab-bar {
		padding: 30rpx 0 0;
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f4614e;
		.item {
			height: 100rpx;
			position: relative;
			color: #b4b3b8;
			font-size: 20rpx;
			line-height: normal;
			overflow: hidden;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: -100%;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background-image: linear-gradient(to bottom, #ffdcd4, #fff8f7);
				background-color: red;
				transition: transform 0.35s ease 0s;
				transform: translateY(0);
			}

			>view {
				position: relative;
				z-index: 2;
			}


			&.active {
				color: #313151;

				/deep/ .uni-icons {
					color: #313151 !important;
				}

				&:before {
					transform: translateY(100rpx);
				}
			}
		}
	}


	// 转换移动
	@keyframes translate {
		from {
			transform: translateY(0) scale(1, 1);
		}

		to {
			transform: translateY(-20rpx) scale(1.1, 1.1);
		}
	}
</style>